<template>
<div>
  <div id="banner">
    <!-- 轮播图显示 -->
   <el-carousel :interval="3000" type="card"  height="400px" >
    <el-carousel-item v-for="(item,i) in list_img" :key="i">
       <img :src="item.picture" alt="">
    </el-carousel-item>
  </el-carousel>
  </div>
  <div class="mod-item">
       <div class="title">
         Recommend <br>
          贫困户推荐
       </div>
       <ul>
         <li v-for="(item,index) in list_pinkun" :key="index">
           
               <img :src="item.cover" alt="">
               <span>{{item.name}}</span>
             
         </li>
       </ul>
       <div class="more" @click="$router.push('/pinkunview')">查看更多</div>
  </div>
  <div class="mod-item">
       <div class="title">
         Recommend <br>
          扶农政策推荐
       </div>
       <ul>
         <li v-for="(item,index) in list_funong" :key="index">
           
               <img :src="item.cover" alt="">
               <span>{{item.title}}</span>
             
         </li>
       </ul>
       <div class="more"  @click="$router.push('/fupinview')">查看更多</div>
  </div>
   <div class="mod-item">
       <div class="title">
         Recommend <br>
          志愿者招聘推荐
       </div>
       <ul>
         <li v-for="(item,index) in list_zhiyuanzhe" :key="index">
           
               <img :src="item.picture" alt="">
               <span>{{item.total}}</span>
             
         </li>
       </ul>
       <div class="more" @click="$router.push('/zhiyuanview')">查看更多</div>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      list_img:[],
      list_pinkun:[],
      list_funong:[],
      list_zhiyuanzhe:[],
      Size:4,
    }
  },
  methods:{
    async getphoto(){
     let { data: res } = await this.$axios.get("/carousel/getlist",{
       params:{
         pageSize:this.Size
       }
     });
      // window.console.log(this.pageNum)
      this.list_img = res.data.list;
      // window.console.log(res)
    },
    async getPinKun(){
    let {data:res} = await this.$axios.get("/poor/getlist?pageNum=1&pageSize=2")
    this.list_pinkun=res.data.list;
    // window.console.log(res);
    },
    async getFuNong(){
    let {data:res} = await this.$axios.get("/alleviation/getlist?pageNum=1&pageSize=4")
    this.list_funong=res.data.list;
    // window.console.log(res);
    },
    async getZhiYuanZhe(){
    let {data:res} = await this.$axios.get("/volunteer/getlist?pageNum=1&pageSize=2")
    this.list_zhiyuanzhe=res.data.list;
    // window.console.log(res);
    },
    pushpinkun(){
      this.$router.push('/pinkunview')
    }
  },
  created(){
    this.getphoto();
    this.getPinKun();
    this.getFuNong();
    this.getZhiYuanZhe();
  }
}
</script>
<style lang="scss" scoped>
 .el-carousel{
   background-color: #FFE4E1;
  .el-carousel__item img {
     height: 400px;
     width: 100%;
  }
 }
  
.mod-item{
    width: 80%;
    margin: 0 auto;
    // background-color: aquamarine;
    .title{
      margin: 50px 0 30px;
      text-align: center;
      font-size: 25px;
      color: #74787c;
    }
    ul{ 
      // border: 1px #74787c solid;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li{
        width: 48%;
        height: 130px;
        display: flex;
        margin: 5px;
        border: 1px #d3d7d4 solid;
        border-radius: 5px;
        box-shadow: 0 0  3px #d3d7d4;
        align-items: center;
        img{
          margin: 5px;
          height: 120px;
          width: 120px;
          // border:1px salmon solid;
          border-radius: 50%;
          box-shadow: 0 0  5px #d3d7d4;
        }
        span{
          display: inline-block;
          font-size: 20px;
          color: #57d6fd;
          font-weight: 500;
          margin: 0 auto;
        }
      }
    }
    .more{
      width: 100px;
      height: 30px;
      margin: 20px auto 20px;
      text-align: center;
      line-height: 30px;
      border: 1px #57d6fd solid;
      border-radius: 25px;
      cursor: pointer;
      color: #57d6fd;
    }
  }
</style>


